<template>
  <main class="main">
    <div class="c-navigation">
      <div class="nav">
        <div class="parent" v-if="appRoutePath.data && !appRoutePath.parent">
          <c-icon :icon="appRoutePath.data.icon"/>
          {{ appRoutePath.data.title }}
        </div>
        <div class="parent" v-if="appRoutePath.parent">
          <c-icon :icon="appRoutePath.parent.icon"/>
          {{ appRoutePath.parent.title }}
        </div>
        <div :class="navigationShow?'parent':'cur'" v-if="appRoutePath.data && appRoutePath.parent" @click="backClick">
          <span>></span>
          {{ appRoutePath.data.title }}
        </div>
        <div class="cur" v-if="navigationShow">
          <span>></span>
          {{ title+'详情' }}
        </div>
      </div>
      <div class="slot">
        <slot name="nav"></slot>
      </div>
    </div>
    <slot/>
  </main>
</template>

<script lang="js">
import cCard from "./cCard.vue";
import Time from '@/components/time.vue'

export default {
  components: {
    Time,
    cCard
  },
  props: {
    navigationShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
  },
  data() {
    return {}
  },
  methods:{
    backClick(){
      this.$emit('showBack',false)
    }
  },
  computed: {
    appRoutePath() {
      return this.$store.state.app.appRoutePath
    }
  }
}
</script>

<style scoped lang="stylus">
.main {
  display: flex;
  margin-bottom: 20px
  align-items center
}

.c-navigation {
  flex-grow 1
  display flex
  justify-content space-between
  box-shadow: 0 4px 8px 0 rgba(14, 27, 110, 0.15), 0 2px 4px 0 rgba(14, 24, 101, 0.20);
  border-radius: 16px;
  background: #FFFFFF;
  margin-right 20px
  padding 20px

  .nav{
    display flex
    align-items center
    .parent {
      display flex
      align-items center
      font-size: 14px;
      color: #484D78;

      img {
        margin-right 5px
      }
    }

    .cur {
      margin-left 5px
      display flex
      align-items center
      font-size: 14px
      color: #5B8DFB

      span {
        color: #484D78;
        margin-right 5px
      }
    }
  }
  .slot{
    font-size: 14px;
    color: #484D78;
  }
}
</style>
